import React,{useEffect,useState} from 'react'
import "./Board.css"

const Board = () => {
    //日增长
    const [dayRise,setDayRise] = useState(0)
    //日活跃
    const [dayLive,setDayLive] = useState(0)
    //画作
    const [paintings,setPaintings] = useState(0)
    //题目
    const [qa,setQa] = useState(0)
    useEffect(() => {
        fetch('https://api.52h5.xyz:3001/data')
        .then(res=>res.json())
        .then(res=>{
            console.log(res)
            console.log(res.visit_uv_new)
            if(res.visit_uv_new != []){
                setDayRise(res.visit_uv_new[0].value)
            }else{
                setDayRise(0)
            }
            if(res.visit_uv_new != []){
                setDayLive(res.visit_uv_new[0].value)
            }else{
                setDayLive(0)
            }
        })
        .catch(err=>{
            console.log(err)
        })
        fetch("https://api.52h5.xyz:3001/paintings")
        .then(res=>res.json())
        .then(res=>{
            setPaintings(res.data.length);
        })
        fetch("https://api.52h5.xyz:3001/adminqa")
        .then(res=>res.json())
        .then(res=>{
            console.log(res,'11111')
            setQa(res.data.length);
        })
        .catch(err=>{
            console.log(err)
        })
    }, [])
    return (
        <div className="board">
            <div className="info">
                <h3>用户数据</h3>
                <div className="block">
                    <div className="left">
                        <p>新增用户</p>
                        <p>{dayRise}</p>
                    </div>
                    <div className="right">
                        <p>用户总数</p>
                        <p>{dayLive}</p>
                    </div>
                </div>
                <h3>画作数据</h3>
                <div className="block">
                    <div className="left">
                        <p>新增画作</p>
                        <p>1</p>
                    </div>
                    <div className="right">
                        <p>画作总数</p>
                        <p>{paintings}</p>
                    </div>
                </div>
                <h3>题目数据</h3>
                <div className="block">
                    <div className="left">
                        <p>新增题目</p>
                        <p>13</p>
                    </div>
                    <div className="right">
                        <p>题目总数</p>
                        <p>{qa}</p>
                    </div>
                </div>

            </div>           
        </div>
    )
}

export default Board
